/**
 * hello !
 * 我是软帝集团的杨标，这里，是我的简历，请您耐心等待简历的生成。
 */

/**
 * 首先，我们先制作一个控制台，来控制简历的生成。
 * 对浏览器的样式做一个简单的预处理，顺便加个背景。
 */

* {
    -webkit-transition: all 1s;
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

html {
    background-color: #244E6E;
}

/**
 * 貌似黑色的字是不是不太舒服?
 * 我来给加点别的样式。
 */

pre, a {
    color: #fff;
}

pre:not(:empty) {
    width: 49%;
    max-height: 45%;
    background: rgb(48, 48, 48);
    border: 1px solid #ccc;
    overflow: auto;
    font-family: monospace;
    padding: 10px 10px 20px;
    margin: 10px;
    white-space: pre-wrap;
    outline: 0;
}

/**
 * 投放到右边。
 */

#style-text {
    -webkit-transform: translateX(95%);
    position: absolute;
}

/**
 * 语法高亮。
 */

.comment       { color: #857F6B; font-style: italic; }
.selector      { color: #E69F0F; }
.selector .key { color: #64D5EA; }
.key           { color: #64D5EA; }
.value         { color: #BE84F2; }
.value.px      { color: #F92772; }

pre:not(:empty) {
    max-height: 90%;
}

/**
 * 来点3D效果。
 */

body {
  -webkit-perspective: 1000px;
}

#style-text {
  -webkit-transform: translateX(98.5%) rotateY(-10deg);
  -webkit-transform-origin: right;
}

/**
 * 控制台生成完毕，简历开始产出。
 */

pre:not(#style-text) {
  -webkit-transform: rotateY(10deg);
  -webkit-transform-origin: left;
}
